import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Layout, Menu, message, Icon} from 'antd';

class NavBar extends Component {

    onClick = ({key}) => {
        message.info(`Click on item ${key}`);
    };

    render() {
        const SubMenu = Menu.SubMenu;

        return (
            <Layout className="layout layout-set">
                <Menu onClick={this.onClick}
                      mode="horizontal"
                      defaultSelectedKeys={['1']}
                      style={{lineHeight: '30px'}}
                >
                    <Menu.Item key="1"><NavLink to="/" exact>首页</NavLink></Menu.Item>

                    <SubMenu title={<span className="submenu-title-wrapper">关于协会 <Icon type="caret-down"/></span>}>
                        <Menu.Item key="SubMenu1"><NavLink to="/about_association">协会概况</NavLink></Menu.Item>
                        <Menu.Item key="SubMenu2"><NavLink to="/about_association">协会资质</NavLink></Menu.Item>
                        <Menu.Item key="SubMenu3"><NavLink to="/about_association">理事会</NavLink></Menu.Item>
                        <Menu.Item key="SubMenu4"><NavLink to="/about_association">协会荣誉</NavLink></Menu.Item>
                        <Menu.Item key="SubMenu5"><NavLink to="/about_association">大事记</NavLink></Menu.Item>
                    </SubMenu>

                    <Menu.Item key="2"><NavLink to="/association">协会动态</NavLink></Menu.Item>
                    <Menu.Item key="3"><NavLink to="/meeting">会议通知</NavLink></Menu.Item>
                    <Menu.Item key="4"><NavLink to="/join_unit">加入协会</NavLink></Menu.Item>
                    <Menu.Item key="5"><NavLink to="/member">会员单位</NavLink></Menu.Item>

                    <SubMenu title={<span className="submenu-title-wrapper">教育培训 <Icon type="caret-down"/></span>}>
                        <Menu.Item key="1"><NavLink to="/educational">培训科目</NavLink></Menu.Item>
                        <Menu.Item key="2"><NavLink to="/score_inquiry">成绩查询</NavLink></Menu.Item>
                    </SubMenu>

                    <Menu.Item key="6"><NavLink to="/technical">技术服务</NavLink></Menu.Item>
                    <Menu.Item key="7"><NavLink to="/concat">联系我们</NavLink></Menu.Item>
                </Menu>
            </Layout>
        );
    }
}

export default NavBar;
